<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <style>
                .cart{width: 700px;padding: 0 10px 10px;border: 1px solid #D5E5F5;}
                .cart-title {margin-bottom: 10px;font-size: 14px;border-bottom: 1px solid #AED2FF;line-height: 30px;height: 30px;font-weight: 700;text-indent: 15px;color: #333;font-family: 'Microsoft YaHei';}
                .cart-table{width: 100%;margin: 0 auto;border-collapse: collapse;font-size: 12px;font-family: Verdana,"Microsoft YaHei";color: #333;}
                .cart-table th{border-bottom: 2px solid #B2D1FF;font-weight: normal;height: 35px;line-height: 23px;}
                .cart-item {background-color: #FAFCFF;border-bottom: 1px dotted #84B3FD;}
                .cart-item td{height: 55px;text-align: center;}
                .cart-item .cart-txt-left{text-align:left;}
                .cart-name{color: #3366D4;font-weight: bold;}
                .cart-subtotal{color: #FF3334;font-weight: bold;}
                .cart-reduce,.cart-add{display:inline-block;width: 16px;height: 16px;line-height:16px;color: #FFF;background-color: #BDBDBD;border: 0;cursor: pointer;border-radius: 2px;font-family:'Arial';font-size:13.3333px;}
                .cart-reduce:hover,.cart-add:hover{background-color: #FF9900;}
                .cart-num {margin: 5px;width: 35px;text-align: center;height: 20px;line-height: 20px;padding: 0 3px;display:inline-block;background:#fff;border:1px solid #bbb}
                .cart-del,.cart-all{color: #3366D4;}
                .cart-del:hover,.cart-all:hover{text-decoration:underline;cursor:pointer}
                .cart-bottom{height: 55px;text-align:right}
                .cart-bottom .cart-all{position:relative;top:1px}
                .cart-total-price{color: #FF3334;font-weight: bold;font-size: 16px;}
                .cart-bottom-btn{color: #FFF;font-size: 14px;font-weight: 600;cursor: pointer;margin: 0 20px;background: #FE8502;border: 1px solid #FF6633;border-radius: 5px 5px 5px 5px;padding: 6px 12px;}
                .cart-bottom-btn:hover{background: #FF6600;}
              </style>
    <div class="cart">
        <div class="cart-title">我的购物车</div>
        <table class="cart-table">
          <tr>
              <th><span class="cart-all">全选</span></th><th>商品</th>
              <th>单价</th><th>数量</th><th>小计</th><th>操作</th>
          </tr>  
          <tr class="cart-item">
              <td><input  class="cart-check" type="checkbox" checked></td>
              <td><span class="cart-name"> Loading...</span></td>
              <td><span class="cart-price">0</span></td>
              <td>
                  <span class="cart-reduce">-</span>
                  <span class="cart-num">0</span>
                  <span class="cart-add">+</span>
              </td>
                  <td><span class="cart-subtotal">0</span></td>
                  <td><span class="cart-del">删除</span></td>
          </tr>
          <tr class="cart-bottom">
              <td colspan="6">
                  <span>已选择<span class="cart-total-num">0</span>件商品</span>
                  <span>总计:<span class="cart-total-price">0</span></span>
                  <span>提交订单</span>
              </td>
          </tr>
        </table>
    </div>
    <script src="ShopCart.js"></script>
    <script>
    ShopCart('cart',[
        {name:'JavaScript实战',price:45.8,num:1},
        {name:'大学语文',price:30,num:9},
        {name:'大话西游',price:49,num:79},
        ]);
    </script>
</body>
</html>